<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="my">
        <span slot="label"
          ><i class="el-icon-user-solid" style="margin-right: 5px" />{{
            $t('customer.myCustomer')
          }}</span
        >
        <!--        <CustomerIndex  v-if="myState" :is="my" :action="activeName" />-->
        <CustomerBlockIndex
          v-if="myState"
          :is="my"
          :action="activeName"
          :tabIndex="1"
        />
      </el-tab-pane>
      <el-tab-pane name="intention">
        <span slot="label"
          ><i class="el-icon-s-custom" style="margin-right: 5px" />{{
            $t('customer.intentCustomer')
          }}</span
        >
        <!--        <CustomerIndex  v-if="intentionState" :is="intention" :action="activeName" />-->
        <CustomerBlockIndex
          v-if="intentionState"
          :is="intention"
          :action="activeName"
          :tabIndex="2"
        />
      </el-tab-pane>
      <el-tab-pane name="water">
        <span slot="label"
          ><i class="el-icon-s-opportunity" style="margin-right: 5px" />{{
            $t('customer.waterCustomer')
          }}</span
        >
        <!--        <CustomerIndex  v-if="waterState" :is="water" :action="activeName" />-->
        <CustomerBlockIndex
          v-if="waterState"
          :is="water"
          :action="activeName"
          :tabIndex="3"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const CustomerIndex = (resolve) =>
  require(['@/views/customer/index/index'], resolve)
const CustomerBlockIndex = (resolve) =>
  require(['@/views/customer/index/block'], resolve)
export default {
  name: 'Collect',
  props: {
    action: {
      type: String,
    },
  },
  data() {
    return {
      activeName: 'my',
      my: '',
      myState: false,
      intention: '',
      intentionState: false,
      water: '',
      waterState: false,
    }
  },
  mounted() {
    this.checkVue(this.activeName)
  },
  methods: {
    handleClick(tab, event) {
      this.checkVue(tab.name)
    },
    checkVue(name) {
      switch (name) {
        case 'my':
          this.myState = false
          this.my = CustomerBlockIndex
          this.$nextTick(() => {
            this.myState = true
          })
          break
        case 'intention':
          this.intentionState = false
          this.intention = CustomerBlockIndex
          this.$nextTick(() => {
            this.intentionState = true
          })
          break
        case 'water':
          this.waterState = false
          this.water = CustomerBlockIndex
          this.$nextTick(() => {
            this.waterState = true
          })
          break
      }
    },
  },
}
</script>

<style scoped>
/deep/ .el-tabs--border-card > .el-tabs__content {
  padding: unset !important;
}
</style>
